<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>原生js图片懒加载插件</title>
		<!--重置基础样式-->
		<link rel="stylesheet" type="text/css" href="css/reset.css"/>
		<!--主要样式-->
		<link rel="stylesheet" type="text/css" href="css/index.css"/>
		<!--主要js-->
		<script src="js/index.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="index">
		<h3 style="align-content: center;font-size: 30px">向下滚动页面,查看加载效果</h3>
			<div class="index-img">
				<img data-src="http://www.jq22.com/img/cs/500x300-1.png" src="" alt="" />
			</div>
			<div class="index-img">
				<img data-src="http://www.jq22.com/img/cs/500x300-2.png" src="" alt="" />
			</div>
			<div class="index-img">
				<img data-src="http://www.jq22.com/img/cs/500x300-3.png" src="" alt="" />
			</div>
			<div class="index-img">
				<img data-src="http://www.jq22.com/img/cs/500x300-4.png" src="" alt="" />
			</div>
			<div class="index-img">
				<img data-src="http://www.jq22.com/img/cs/500x300-5.png" src="" alt="" />
			</div>
			<div class="index-img">
				<img data-src="http://www.jq22.com/img/cs/500x300-6.png" src="" alt="" />
			</div>
			<div class="index-img">
				<img data-src="http://www.jq22.com/img/cs/500x300-7.png" src="" alt="" />
			</div>
			<div class="index-img">
				<img data-src="http://www.jq22.com/img/cs/500x300-8.png" src="" alt="" />
			</div>
		</div>
	</body>
</html>
